<template>
  <scroll-view class="index" scroll-y>
    <view class="header">
      <view class="header-title">{{shopInfo.shopName||'物联云商演示店铺'}}</view>
      <!-- <image src="/static/news.png" mode="widthFix" class="news" /> -->
    </view>
    <view class="iconlist">
      <view
        v-for="(item,index) in iconList"
        :key="index"
        class="iconlist-child"
        @tap="handleIconClick(index)"
      >
        <image :src="item.src" mode="widthFix" />
        <view>{{item.txt}}</view>
      </view>
    </view>
    <view class="black-list">
      <view class="status-box">
		<image @click="checkStatus"
		  src="/static/index-status/status0.png"
		  mode="widthFix"
		  v-if="stastus&&stastus.toExamine===0"
		/>
        <image @click="checkStatus"
          src="/static/index-status/status1.png"
          mode="widthFix"
          v-if="stastus&&stastus.toExamine===1"
        />
        <image @click="checkStatus"
          src="/static/index-status/status3.png"
          mode="widthFix"
          v-if="stastus&&stastus.toExamine===3"
        />
      </view>
      <view class="iconlistSec">
        <view class="iconlistSec-title">经营管理</view>
        <view class="iconlistSec-list">
          <view
            v-for="(item,index) in iconListSec"
            :key="index"
            class="iconlistSec-list-child"
			@click="listBtn(index)"
          >
            <image :src="item.src" mode="widthFix" />
            <view>{{item.txt}}</view>
          </view>
        </view>
      </view>
      <view class="shopData">
        <view class="shopData-header">
          <view class="title">门店数据</view>
          <view class="tab">
            <view
              class="tab-child"
              :class="tabIdx===index?'tab-child-c':''"
              v-for="(item,index) in tab"
              :key="index"
              @tap="tabIdxBtn(index)"
            >{{item}}</view>
          </view>
        </view>
        <view class="shopData-data">
          <view
            class="shopData-data-child"
            v-for="(item,index) in shopData"
            :key="index"
          >
            <view class="shopData-data-child-tit">{{item.tit}}</view>
            <view class="shopData-data-child-val">{{item.val}}</view>
          </view>
        </view>
      </view>
      <view class="banner">
        <image src="/static/22@2x.png" mode="widthFix" />
        <view class="banner-tit-1">这里是一个标题</view>
        <view class="banner-tit-2">点击入驻物联云商</view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { getSatues,confirm,getStoreDate } from './api'
import CONSTS from '@/src/consts';
import item from '@/src/pages/components/order-item'
import tab from '@/src/pages/components/tab'
import MescrollUni from 'mescroll-uni'
export default {
  data () {
    return {
      stastus: null, //审核状态
	  storeForm:'',
	  timeSelect:'1',
      shopData: [
        {
          tit: '店铺页访问数',
          val: '***'
        },
        {
          tit: '预约人数',
          val: '865'
        }, {
          tit: '预订完成数',
          val: '865'
        }, {
          tit: '到店券领取笔数',
          val: '865'
        }, {
          tit: '到店券核销数',
          val: '865'
        }, {
          tit: '',
          val: ''
        }
      ],
      tabIdx: 0,
      tab: ['今日', '近3日', '近7日'],
      iconList: [{
        src: '/static/ic/1.png',
        txt: '输码验证'
      }, {
        src: '/static/ic/2.png',
        txt: '扫码验证'
      }, {
        src: '/static/ic/3.png',
        txt: '买单收款'
      }, {
        src: '/static/ic/4.png',
        txt: '订单管理'
      }],
      iconListSec: [{
        src: '/static/svg/9373.svg',
        txt: '店铺管理',
		url:'/src/pages/my/pages/detailSet/index'
      }, {
        src: '/static/svg/9414.svg',
        txt: '发布到店券',
		url:'/src/pages/coupon/index'
      }, {
        src: '/static/svg/9426.svg',
        txt: '预订管理',
		url:'/src/pages/index/pages/reserve/index'
      }, {
        src: '/static/svg/9544.svg',
        txt: '加入合伙人'
      }],
      shopInfo: {}
    }
  },
  components: {
    item,
    tab,
    MescrollUni
  },
  onShow () {
    // alert('dada')
	const _self = this
	uni.getStorage({
	  key: 'shopInfo',
	  success: function (res) {
	    _self.shopInfo = res.data
	  }
	});
    this.loadData()
	this.storeData()
  },
  mounted () {

  },
  methods: {
	tabIdxBtn(index){
		this.tabIdx = index
		this.timeSelect = index+1
		this.storeData()
		console.log(index)
	},
	listBtn(index){
		uni.navigateTo({
		  url: this.iconListSec[index].url
		});
	},
    handleIconClick (idx) {

      switch (idx) {
        case 0:
          this.$utils.common.navigateTo('src/pages/index/pages/comput/index')
          break;
        case 1:
          this.handleScanCode()
          break;
        case 2:
          this.$utils.common.navigateTo('src/pages/index/pages/pay/index')
          break;
        case 3:
          this.$utils.common.switchTab('src/pages/order/index')
          break;
        default:
          return
      }
    },
    handleScanCode () {
		let _this = this
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
		  _this.keyInputProps = res.result
		  _this.handleConfirm()
        }
      });
    },
	async handleConfirm(){
	  const params={awardCode:parseInt(this.keyInputProps)}
	  try{
	    const {data}=await confirm(params)
	    // this.$toest('兑换成功')
		this.$utils.common.toast.fail("兑换成功");
	  }catch(err){
		this.$utils.common.toast.fail(err.data.message);
	    // this.$toest(err.data.message)
	  }
	},
	async storeData(){
	  const params={
		  storeId:this.shopInfo.id,
		  timeSelect:this.timeSelect
	  }
	  try{
	    const {data}=await getStoreDate(params)
	    this.storeForm = data
		console.log(data)
		this.shopData[1].val = this.storeForm.appointmentNum
		this.shopData[2].val = this.storeForm.appointmentCompleteNum
		this.shopData[3].val = this.storeForm.couponGetNum
		this.shopData[4].val = this.storeForm.couponFinishNum
	  }catch(err){
		this.$utils.common.toast.fail(err.data.message);
	    
	  }
	},
    handleTabChange (idx) {
      this.tabIndex = idx
    },
    handleClassify (res) {
      this.stata1 = []
      this.stata2 = []
      for (const item of res) {
        if (item.state === 1) {
          this.stata1.push(item)
        } else if (item.state === 2) {
          this.stata2.push(item)
        }
      }
    },
    async loadData () {
      try {
        const { data } = await getSatues()
        console.log(data)
        this.stastus = data
      } catch (err) {
        console.log(err)
      }
    },
	checkStatus () {
		switch (this.stastus.toExamine) {
		  case 0:
		    this.$utils.common.navigateTo('src/pages/register/step');
		    break;
		  case 1:
		    uni.showToast({title: '资质审核中',icon:'none',duration: 1000});
		    break;
		  case 2:
		    
		    break;
		  case 3:
		    this.$utils.common.navigateTo('src/pages/register/step');
		    break;
		  default:
		    return
		}
	}
  },
}
</script>
<style lang="scss" scoped>
.news {
  width: 44rpx;
  position: absolute;
  right: 30rpx;
  // right: 30rpx;
}
.status-box {
  width: 702rpx;
  overflow: hidden;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-bottom: 38rpx;
  image {
    display: block;
    width: 100%;
  }
}
.index {
  height: 100vh;
  background-color: #f1f1f1;
  .header {
    position: relative;
    padding: 0 30rpx;
    padding-top: 80rpx;
    padding-bottom: 12rpx;
    display: flex;
    align-items: center;
    // height: 120rpx;
    background: #0cd4d3;
    &-img {
      width: 60rpx;
      height: 60rpx;
      border-radius: 60rpx;
      margin-right: 20rpx;
    }
    &-title {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 48rpx;
      color: rgba(255, 255, 255, 1);
    }
  }
  .black-list {
    margin-top: -80rpx;
  }
  .iconlistSec {
    margin: 0 24rpx;
    background-color: #fff;
    border-radius: 20rpx;
    &-title {
      padding: 30rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 38rpx;
      color: rgba(3, 3, 3, 1);
    }
    &-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      &-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 32rpx;
        color: rgba(3, 3, 3, 1);
        padding-bottom: 42rpx;
        image {
          width: 60rpx;
          margin-bottom: 24rpx;
        }
      }
    }
  }
  .shopData {
    margin: 24rpx;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 20rpx;
    &-header {
      padding: 30rpx;

      display: flex;
      justify-content: space-between;
      .title {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 38rpx;
        color: rgba(3, 3, 3, 1);
        opacity: 1;
      }
      .tab {
        display: flex;
        &-child {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 38rpx;
          color: rgba(3, 3, 3, 1);
          opacity: 1;
          transition: all 0.5s;
          margin-right: 56rpx;
          padding-bottom: 2px;
          border-bottom: 2px solid #ffffff;
        }
        &-child-c {
          color: rgba(12, 212, 211, 1) !important;
          border-bottom: 2px solid #0cd4d3;
        }
      }
    }
    &-data {
      margin-top: 32rpx;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0 54rpx;
      &-child {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 168rpx;
        &-tit {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 32rpx;
          color: rgba(112, 112, 112, 1);
          opacity: 1;
        }
        &-val {
          margin-top: 40rpx;
          margin-bottom: 42rpx;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 42rpx;
          color: rgba(3, 3, 3, 1);
          opacity: 1;
        }
      }
    }
  }
  .banner {
    width: 702rpx;
    height: 160rpx;
    margin: 0 auto;
    position: relative;
    image {
      width: 100%;
    }
    &-tit-1 {
      position: absolute;
      top: 28rpx;
      left: 44rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 48rpx;
      color: rgba(3, 3, 3, 1);
    }
    &-tit-2 {
      position: absolute;
      top: 82rpx;
      left: 44rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 48rpx;
      color: rgba(3, 3, 3, 1);
    }
  }
  .iconlist {
    background: #0cd4d3;
    padding-top: 60rpx;
    padding-bottom: 120rpx;
    display: flex;
    &-child {
      width: 25%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 44rpx;
      color: rgba(255, 255, 255, 1);
      image {
        width: 60rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}
</style>

